<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>收钱吧</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" />
</head>
<body>
    <div class="col-j" style="height:100%;">
	    <div class="auto p-bg-red" style="-webkit-overflow-scrolling: touch;">
	        <div class="container">
	            <div class="user row">
	                <div class="d1">
	                    <img  class="" src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_300x300.jpg">
	                </div>
	                <div class="d2 auto col-c">小刘水果店</div>
	            </div>

	            <div class="money">
	                <div class="l1 row" onclick="keyboardShow()">
	                    <div class="d1">¥</div>
	                    <div class="d2 auto">
	                        <div class="h1 J_money_value"></div>
	                    </div>
	                </div>
	                <div class="d3">
	                    <input class="J_money_mark" placeholder="添加付款备注(最多50个字)" value="" />
	                </div>
	            </div>

	            <div class="list1 row">
	                <div class="d1 row auto">
	                    <div class="i1 fcolor fa fa-credit-card-alt "></div>
	                    <div class="d2">优惠活动</div>
	                </div>
	                <div class="d3 row">
	                    <div class="d4 fcolor">暂无活动</div>
	                    <div class="d5">❯</div>
	                </div>
	            </div>

	            <div class="card1 row-j">
	                <div class="d1 item">
	                    <div class="d2 row-c">
	                        <div class="i1 fcolor fa fa-address-card "></div>
	                        <div class="h1">会员卡支付</div>
	                    </div>
	                    <div class="h2">享受会员折扣</div>
	                </div>
	                <div class="d1 item col-c slt">
	                    <div class="d2 row-c">
	                        <div class="i1 fa fa fa-wechat fcolor2"></div>
	                        <div class="h1">微信支付</div>
	                    </div>
	                    <div class="i2 fcolor fa fa-check-circle "></div>
	                </div>
	            </div>

	            <div class="card2 row">
	                <div class="auto"></div>
	                <div class="d1 row">
	                    <div class="h1">实付：</div>
	                    <div class="h2 fcolor">¥<span class="J_money_value"></span></div>
	                </div>
	            </div>
	        </div>
	    </div>
	    <div class="J_keyboard" >
	        <div class="keyboard row">
	            <div class="d1 auto">
	                <div class="d4 is-c">1</div>
	                <div class="d4 is-c">2</div>
	                <div class="d4 is-c">3</div>
	                <div class="d4 is-c">4</div>
	                <div class="d4 is-c">5</div>
	                <div class="d4 is-c">6</div>
	                <div class="d4 is-c">7</div>
	                <div class="d4 is-c">8</div>
	                <div class="d4 is-c">9</div>
	                <div class="d4 is-c">.</div>
	                <div class="d4 is-c">0</div>
	                <div class="d4" onclick="keyboardHide()">
	                    <div class="fa fa-keyboard-o i2"></div>
	                </div>
	            </div>
	            <div class="d2 col-j">
	                <div class="d3 col-c row-c" onclick="keyboardDel()">
	                    <div class="fa fa-close i1"></div>
	                </div>
	                <div class="auto d5 bgcolor col-c" onclick ="keyboardPay()">付款</div>
	            </div>
	        </div>
	    </div>
	</div>
	<script type="text/javascript">
		// 付款和备注
		var data= {
	        money:{
	            value:'',
	            mark:'',
	        }
	    }
		// 显示/隐藏键盘
        function keyboardShow(){
            document.querySelector('.J_keyboard').style.display='block';
        }
        function keyboardHide(){
            document.querySelector('.J_keyboard').style.display='none';
        }

        // 输入数字或点
        var keys=document.querySelectorAll('.J_keyboard .is-c');
        for(var i=0;i<keys.length;i++){
            (function(i){
                keys[i].onclick=function(){
		            // 获取按下值
		            var item=this.innerHTML;
		            // 当前的数字
		            var moneyValue=data.money.value;
		            // 限制小数点只能输入一个
		            if (moneyValue.indexOf('.')>-1 && item=='.') return;
		            // 限制最多只能输入9位
		            if (moneyValue.length>9) return;
		            // 叠加
		            moneyValue+=item;
		            // 设置 money
            		moneySet(moneyValue);
                };
            })(i);
        }

        // 删除
        function keyboardDel(){
            // 当前的数字
            var moneyValue=data.money.value;
            // 删除最后一个
            if (moneyValue) {
                moneyValue = moneyValue.slice(0, -1);
            }
            // 设置 money
            moneySet(moneyValue);
        }
        // 设置 money
        function moneySet(moneyValue){
            data.money.value=moneyValue;
            document.querySelectorAll('.J_money_value')[0].innerHTML=moneyValue;
            document.querySelectorAll('.J_money_value')[1].innerHTML=moneyValue;
        }
        // 付款
        function keyboardPay(){
            var moneyValue=data.money.value;
            var moneyMark=data.money.mark;
            alert(    '付款：'+moneyValue   );
            alert(    '付款备注：'+moneyMark   );
        }
        // 付款备注
        document.querySelector('.J_money_mark').addEventListener("change",function(){
        	data.money.mark=this.value;
        },false);
	</script>
</body>
</html>